<template>
	<view>
		<u-tabs-swiper ref="tabs" bg-color="#ECFDF5" :list="list" :colors="colors" bar-height="6" bar-width="80" count="cate_count"
			:current="swiperCurrent" active-color="#10B981">
		</u-tabs-swiper>
		<swiper class="bg-green-50" :style="{height:`${swiperHeight}px`}" :current="swiperCurrent" @change="tabsChange"
			:circular="false" :skip-hidden-item-layout="true">
			<swiper-item class="swiper-item bg-green-200  rounded h-full" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y="true" class="scroll-view rounded w-full p-20" :style="{height:`${swiperHeight}px`}">
					<view class="flex h-200 justify-between  my-10 rounded" v-for="(member,index) in members"
						:key="index" v-if="swiperCurrent==0">
						<image :src="member.information.merchant_preview" mode="scaleToFill"
							class="h-200 w-1-2 rounded">
						</image>
						<view class="flex-col w-1-2 justify-center  h-240">
							<text class="text-base font-bold ">{{member.information.merchant_name}}</text>
							<u-rate :count="count" v-model="value" :disabled="true" :colors="colors"></u-rate>
							<text class="text-sm mx-10">{{member.information.merchant_introduce}}</text>
						</view>
						
					</view>
					<view v-for="(user,index) in users" v-if="swiperCurrent==1" :key="index">
						<text class="text-base font-bold ">{{user.name}}</text>
						<text class="text-sm">{{user.email}}</text>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '联盟会员',
					type: 'members'
				}, {
					name: '普通会员',
					type: 'users'
				}],
				swiperHeight: 548,
				value: 5,
				count: 5,
				tabs: [0, 1],
				colors: ['#ffc454', '#ffb409', '#ff9500'],
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				users: [],
				members: []
			}
		},
		created() {
			const info = uni.getSystemInfoSync()
			this.swiperHeight = info.windowHeight - uni.upx2px(340);
			this.getMembers()
		},
		methods: {
			//联盟商户
			async getMembers() {
				this.members = await this.api.get("member")
			},
			//普通商户
			async getUsers() {
				this.users = await this.api.get("normal")
			},
			// tabs通知swiper切换
			async tabsChange(index) {
				this.swiperCurrent = index.detail.current
				const name = this.list[this.swiperCurrent].type;
				if (name == "users" && this.users.length == 0) {
					await this.getUsers()
				} else {
					if (this.members.length == 0)
						await this.getMembers()
				}
			},
			transition(event) {
				console.log(event.detail);
			}
		}
	}
</script>

<style scoped>
	uni-text {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}
</style>
